﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="If.aspx.cs" Inherits="Views_If" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="../ViewModels/If.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h3>If</h3>
<span>The if binding causes a section of markup to appear in your document (and to have its data-bind attributes applied), only if a specified expression evaluates to true.<br />
<span style="font-size:13px;"><b>Note:</b> if plays a similar role to the visible binding. The difference is that, - the visible binding just uses CSS to toggle the container element’s visiblity. 
The if binding, physically adds or removes the contained markup in your DOM, and only applies bindings to descendants if the expression is true.
</span></span>
<h3>Ifnot</h3>
<span>The ifnot binding is a negation to if.</span><br />
<div>
<div class="code">
<xmp>
<span data-bind="if: browserCheck">
    <img data-bind="attr:{src: '../Content/Images/apple.jpg'}"
         height="100" width="100" />
</span>
<span data-bind="if: !browserCheck">
    <img data-bind="attr:{src: '../Content/Images/ko-logo.png'}" />
</span>
</xmp>
</div>
</div>
<h4>Result</h4>
<div>
<span data-bind="if: browserCheck">
You can the below image, only in Internet Explorer.<br />
<img data-bind="attr:{src: '../Content/Images/apple.jpg'}" height="100" width="100" /></span><br />
<span data-bind="if: !browserCheck">
You can the below image in all browsers except Internet Explorer.<br />
<img data-bind="attr:{src: '../Content/Images/ko-logo.png'}" /></span>
</div>
</asp:Content>

